<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>v-on修饰符</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>

  <body>
    <!-- 
      .stop - 调用 event.stopPropagation()。
      .prevent - 调用 event.preventDefault()。
      .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
      .native - 监听组件根元素的原生事件。
      .once - 只触发一次回调。
    -->
    <div id="app">
      <!--1. .stop修饰符的使用  停止冒泡-->
      <div @click="divClick">
        <button @click.stop="btnClick">点击</button>
      </div>
      <!--2. .prevent修饰符的使用 阻止默认行为-->
      <form action="baidu">
        <input type="submit" value="提交" @click.prevent="divClick" />
      </form>
      <!-- 3. 监听某个键盘的键帽 -->
      <input type="text" @keyup.enter="inputClick" />

      <!--4. 只触发一次 -->
      <button @click.once="buttonClick">点击提交一次</button>
    </div>

    <script>
      //创建Vue实例,得到 ViewModel
      var app = new Vue({
        el: "#app",
        data: {},
        methods: {
          divClick() {
            console.log("你好div");
          },
          btnClick() {
            console.log("你好btn");
          },
          divClick() {
            console.log("你好submit");
          },
          inputClick() {
            console.log("你好input");
          },
          buttonClick() {
            console.log("你好button");
          },
        },
      });
    </script>
  </body>
</html>
